<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  </head>

  <body>
    <!-- <svg width="100" height="100" transform="scale(2)" id="svg">
        <polygon :points=points fill="red" stroke="blue" stroke-width="5" />"
    </svg> -->
    <svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
        fill="none"
        stroke="#333"
        stroke-width="2"
        stroke-linejoin="round"
      />
      <!-- <path d="M20 24V17.0718L26 20.5359L32 24L26 27.4641L20 30.9282V24Z" fill="none" stroke="#333" stroke-width="4"
            stroke-linejoin="round" /> -->
      <g style="transform: scale(0.5); translate: 13px 12px">
        <rect
          x="4"
          y="10"
          width="32"
          height="28"
          fill="none"
          stroke="#333"
          stroke-width="4"
          stroke-linejoin="round"
        />
        <path
          fill-rule="evenodd"
          clip-rule="evenodd"
          d="M44 14L36 20.75V27.25L44 34V14Z"
          stroke="#333"
          stroke-width="4"
          stroke-linecap="round"
          stroke-linejoin="round"
        />
      </g>
    </svg>
    <button>
      <img style="width: 40px; height: 40px" src="./startVideo.svg" />
    </button>
    <button class="btn btn-icon"></button>
    <button>
      <svg width="48" height="48" fill="none" xmlns="http://www.w3.org/2000/svg">
        <path
          d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
          fill="none"
          stroke="#333"
          stroke-width="2"
          stroke-linejoin="round"
        />
        <!-- <path d="M20 24V17.0718L26 20.5359L32 24L26 27.4641L20 30.9282V24Z" fill="none" stroke="#333" stroke-width="4"
                stroke-linejoin="round" /> -->
        <g style="transform: scale(0.5); translate: 13px 12px">
          <rect
            x="4"
            y="10"
            width="32"
            height="28"
            fill="none"
            stroke="#333"
            stroke-width="4"
            stroke-linejoin="round"
          />
          <path
            fill-rule="evenodd"
            clip-rule="evenodd"
            d="M44 14L36 20.75V27.25L44 34V14Z"
            stroke="#333"
            stroke-width="4"
            stroke-linecap="round"
            stroke-linejoin="round"
          />
        </g>
      </svg>
    </button>

    <svg width="48" height="48" viewBox="0 0 48 48" fill="none" xmlns="http://www.w3.org/2000/svg">
      <path
        d="M24 44C35.0457 44 44 35.0457 44 24C44 12.9543 35.0457 4 24 4C12.9543 4 4 12.9543 4 24C4 35.0457 12.9543 44 24 44Z"
        fill="none"
        stroke="#02ECED"
        stroke-width="2"
        stroke-linejoin="round"
      />
      <g style="transform: scale(0.5); translate: 12px 12px">
        <path
          d="M15 12L18 6H30L33 12H15Z"
          fill="none"
          stroke="#02ECED"
          stroke-width="4"
          stroke-linejoin="round"
        />
        <rect
          x="4"
          y="12"
          width="40"
          height="30"
          rx="3"
          fill="none"
          stroke="#02ECED"
          stroke-width="4"
          stroke-linejoin="round"
        />
        <path
          d="M24 35C28.4183 35 32 31.4183 32 27C32 22.5817 28.4183 19 24 19C19.5817 19 16 22.5817 16 27C16 31.4183 19.5817 35 24 35Z"
          fill="none"
          stroke="#02ECED"
          stroke-width="4"
          stroke-linejoin="round"
        />
      </g>
    </svg>

    <br />
    <!-- <button @click="scale()">放大</button>
<div style="background-color: blue;width: 500px;height: 500px;"></div> -->
    <script>
      // const s = document.getElementById('svg')

      // const padding = 10
      // const p1 = s.width/2+','+padding
      // const p2 = s.width-padding+','+s.height/2
      // const p3 = s.width/2+','+s.height-padding
      // const p4 = padding+','+s.height/2
      // const points = p1+' '+p2+' '+p3+' '+p4

      // function scale() {
      //     let svg = document.querySelector('svg')
      //     svg.setAttribute('transform', 'scale(2)')

      // }
    </script>
  </body>
  <style>
    .inside {
      scale: 0.8;
    }

    .btn-icon {
      width: 48px;
      height: 48px;
      background-image: url(./startVideo.svg);
      background-repeat: no-repeat;
      background-position: center;
      border: none;
      background-color: transparent;
    }
  </style>
</html>
